<template>
  <div>
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <el-menu router v-for="(o,index) in MenuData" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
          <el-menu-item :index="o.url">
            <i class="el-icon-menu"></i>
            <span slot="title">{{o.name}}</span>
          </el-menu-item>
        </el-menu>
      </div></el-col>
      <el-col :span="16"><div class="grid-content bg-purple-light">
        <router-view/>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MenuView",
  data(){
    return{
      MenuData:[],
      isCollapse: true
    }
  },methods:{
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },menuList(){
      this.axios.post("http://localhost:8003/api/tb-goods/menuList").then(res=>{
        this.MenuData=res.data;
      })
    }
  },created() {
    this.menuList();
  }
}
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 40px;
  }

</style>